<template>
  <div class="map_container">
    <div ref="map" class="map_container_box" :id="id"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    isLoca: {
      type: Boolean,
      default: false
    },
    mapConfig: {
      type: Object,
      default: function () {
        return {}
      },
      required: false
    }
  },
  data () {
    return {
      map: {}
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    async initMap () {
      try {
        const AMap = await this.loadMap()
        this.map = new AMap.Map(this.id, this.mapConfig)
        this.setLoca(this.isLoca)
      } catch (err) {
        this.$errAlert(err)
      }
    },
    setLoca (isloca) {
      if (isloca === false) { return }
      return
    },
    loadMap () {
      return AMapLoader.load({
        'key': '90d72fa7b6c5ef9cf3057e3c984d8cab',
        'version': '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        'plugins': [],
        'Loca': this.isLoca === true ? {
          'version': '2.0.0'
        } : null
      })
    }
  }

}
</script>

<style lang='less' scoped>
.map_container {
  width: 100%;
  height: 100%;
  .map_container_box {
    width: 100%;
    height: 100%;
  }
}
</style>
